<template>
  <div id="main-content">
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane name="list" :label="name + '列表'" v-if="listPaneShow">
        <main-content-list v-if="listContentShow" @handleEdit="handleEdit" :is-tree-table="isTreeTable"
                           @handleAddLowLevel="handleAddLowLevel"
                           :buttons="buttons" :query-condition="queryCondition"
                           :table-head="tableHead"></main-content-list>
      </el-tab-pane>
      <el-tab-pane name="add" label="新增" v-if="addPaneShow">
        <component @save="save" :unionButton="buttons" :button="buttons.children[2]" v-if="addContentShow"
                   v-bind:is="editComponentName"></component>
      </el-tab-pane>
      <el-tab-pane name="edit" label="编辑" v-if="editPaneShow">
        <component @save="save" :unionButton="buttons" :button="buttons.children[2]" v-if="editContentShow"
                   v-bind:is="editComponentName" :form="editContent"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import mainContentList from '../common/main-content-list'
  import menuEdit from '../../components/admin/sys/menu/menu-edit'
  import dicEdit from '../admin/dic/dictionary/dic-edit'
  import areaEdit from '../admin/dic/area/area-edit'
  import officeEdit from '../admin/sys/office/office-edit'
  import userEdit from '../admin/sys/user/user-edit'
  import roleEdit from  '../admin/sys/role/role-edit'

  export default {
    components: {
      mainContentList,
      menuEdit,
      dicEdit,
      areaEdit,
      officeEdit,
      userEdit,
      roleEdit
    },

    name: "main-content",
    data() {
      return {
        editContent: {},
        activeName: 'list',
        listPaneShow: true,
        listContentShow: true,
        addPaneShow: true,
        addContentShow: false,
        editPaneShow: false,
        editContentShow: false,
        tableContent: [],
      }
    },
    mounted(){
      this.initQueryCondition()
    },
    watch: {
      activeName() {
        if (this.activeName == "list") {
          this.listPaneShow = true
          this.listContentShow = true
          this.addPaneShow = true
          this.addContentShow = false
          this.editPaneShow = false
          this.editContentShow = false
        } else if (this.activeName == "add") {
          this.listPaneShow = true
          this.listContentShow = false
          this.addPaneShow = true
          this.addContentShow = true
          this.editPaneShow = false
          this.editContentShow = false
        } else if (this.activeName == "edit") {
          this.listPaneShow = true
          this.listContentShow = false
          this.addPaneShow = false
          this.addContentShow = false
          this.editPaneShow = true
          this.editContentShow = true
        }
      }
    },
    methods: {
      initQueryCondition(){
        if(this.common.isEmpty(this.queryCondition.initValue)){
          this.$set(this.queryCondition,'initValue','0')
        }
      },
      save() {
        this.activeName = 'list'
      },
      handleEdit(content) {
        this.editContent = content
        this.activeName = 'edit'
      },
      handleAddLowLevel(content){
        this.editContent = {}
        this.$set(this.editContent,'parentId',content.id)
        this.$set(this.editContent,'parentIds',content.parentIds + ',' + content.id)
        this.$set(this.editContent,'parentName',content.name)
        this.$set(this.editContent,'parentCode',content.code)
        this.activeName = 'edit'
      }

    },
    props: {
      editComponentName: {
        type: String
      },
      tableHead: {
        type: Array
      },
      name: {
        type: String
      },
      buttons: {
        type: Object
      },

      queryCondition: {
        type: Array
      },
      isTreeTable: {
        type: Boolean,
        default() {
          return false
        }
      }
    },

  }
</script>

<style scoped>

</style>
